<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')">
		<view>
			<my-navbar :custom="false" title="爱聚" :autoBack="false"></my-navbar>
			<!-- <view>
				<my-navbar leftText=" " :storeName="store.roomName" :custom="true" :autoBack="false" :show="show"
					@changeShow="changeShow">
				</my-navbar>
			</view> -->
			<!-- <view style="padding: 40rpx 40rpx 30rpx 40rpx;">
				<u-swiper :list="swiperList" keyName="imgUrl" indicator indicatorMode="line" circular height="280"
					radius="16" @click="handleSwiperClick">
				</u-swiper>
			</view> -->
			<!-- 轮播图区域 -->
			    <view class="carousel-container">
			      <swiper 
			        class="carousel-swiper"
			        indicator-dots
			        autoplay
			        circular
			        interval="3000"
			        duration="500"
			        indicator-active-color="#07c160"
			      >
			        <swiper-item v-for="(slide, index) in swiperList" :key="index">
			          <image 
			            class="carousel-image" 
			            :src="slide.imageurl"
			            mode="widthFix"
			            :alt="'轮播图 ' + (index + 1)"
						@click="handleSwiperClick(slide, index)"
			          ></image>
			        </swiper-item>
			      </swiper>
			    </view>
			
			<!-- <view>
				<my-index-card></my-index-card>
			</view> -->
			<!-- 二维码 -->
			<!-- <view>
				<my-index-ER></my-index-ER>
			</view> -->
			<!-- 热门活动 -->
			<view class="content-hot">
				<view>
					<u--text :bold="true" size="24" color="#6a6a6a" :selectable="false" text="热门活动Ing" />
				</view>
				<view class="hot-list" v-for="(item, index) in activityList" :key="index" @click="handleDetailClick(item, index)">
					<view style="margin-bottom: 24rpx;">
						<view class="hot-list-item">
							<u-row gutter="6rpx">
								<u-col span="8">
									<view style="margin-left: 20rpx; margin-top: 30rpx;">
										<u--text :bold="true" size="36" color="#0f0f0f" :text="item.eventtitle"  />
									</view>
									<view style="margin-right: 380rpx; margin-top: 40rpx;">
										<u-icon name="arrow-right" size="28" :label="item.groupsize" labelColor="#3e3e3e"
											labelSize="24" labelPos="left" @click="handleDetailClick(item, index)"></u-icon>
									</view>
								</u-col>
								<u-col span="4">
									<view style="margin-right: 100rpx;">
										<u--image :src="item.bigImageList[0].imageurl" mode="aspectFit" height="210rpx"
											width="210rpx" ></u--image>
									</view>
								</u-col>
							</u-row>
						</view>
						<view>
							<u-icon name="arrow-rightward" size="36" label="查看详情" :bold="true" labelSize="26"
								labelColor="#000000" labelPos="left" @click="handleDetailClick(item, index)"></u-icon>
						</view>
					</view>
				</view>

			</view>
			
			<!-- 引入AI悬浮按钮 
			<ai-robot-float-button />
			-->
			<my-tabbar></my-tabbar>
		</view>
	</page-meta>

	<view style="max-height: 300rpx;">
		<my-action-sheet :show="show" :list="storeList" @closeShow="closeShow"></my-action-sheet>
	</view>


</template>

<script>
	import AiRobotFloatButton from '@/components/AiRobotFloatButton/AiRobotFloatButton.vue'

	import {
		// getHitokoto
	} from 'common/request/api/hitokoto.js'
	import {
		mapState,
	} from 'vuex'
	import {
		getSwiper,
		getActivity,
	} from '@/config/api.js'
import config from '../../config/config'
	export default {
		components: {
		    AiRobotFloatButton
		  },
		data() {
			return {
				swiperList: [
		
				],
				// 活动列表数据
				      activityList: [
				        
				      ],
				show: false,
				storeList: []
			}
		},
		computed: {
			...mapState(['oneToke', 'store'])
		},
		methods: {
			// 点击轮播图事件
			handleSwiperClick(slide,index) {
			    console.log('点击了第', index + 1, '张轮播图',slide.imagedesc );
				// 跳转到轮播图对应的页面
				if (slide.imagedesc) {
					// 存储到本地缓存
					uni.setStorageSync('searchKey', slide.imagedesc);
					uni.switchTab({ url: `/pages/activitySearch/activitySearch` });
				}else{
					// 显示错误弹框
					uni.showToast({
						title: '操作失败，请稍后重试', // 错误信息
						icon: 'none', // 不显示图标（默认是success图标）
						duration: 3000, // 显示时长（毫秒）
						position: 'center' // 显示位置（center/top/bottom）
						});
				}
			},
				
			// 点击查看详情事件
			handleDetailClick(item,index) {
				console.log('点击了第', index + 1, '查看详情',item );
				// 序列化 + 编码（关键：避免特殊字符截断）
				const jsonStr = encodeURIComponent(JSON.stringify(item));
				console.log(jsonStr)
				uni.navigateTo({ url: '/other_pages/venueDetail/venueDetail?queryObj='+jsonStr });
			},
			changeShow() {
				this.show = true
				console.log(" index show = " + this.show)

			},
			closeShow() {
				this.show = false;
				console.log("index closeShow " + this.show)
			},
			async setSwiper() {
				const {
					data: res
				} = await getSwiper({
					imagecategory:"swiper_image",
				})
				this.swiperList = res.rows
			},
			async getActivityList() {
				const {
					data: res
				} = await getActivity({
					
				})
				console.log(res)
			
				this.activityList = res.rows
				console.log(this.activityList)
			},
		},
		onLoad() {
			this.setSwiper();
			this.getActivityList();
			console.log(uni.$u.http.config.baseURL);
			console.log("baseURL")
		},
		onShow() {			
			this.getActivityList();
		},
		// 监听下拉刷新事件
		  onPullDownRefresh() {
		    console.log("触发下拉刷新");
		    this.setSwiper()
			this.getActivityList()
		  },
		
	}
</script>

<style lang="scss">
	page {
		background-color: $u-bg-color;
	}

	.content-hot {
		margin: auto 10rpx;
		margin-top: 20rpx;
	}

	.hot-list {}

	.hot-list-item {
		position: relative;
		padding: auto 10rpx;
		margin: 10rpx auto;
		height: 210rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); // 轻微阴影，增强层次
		  overflow: hidden;       // 裁剪图片圆角
		  transition: all 0.3s;  //  hover 动画过渡
	}

	.item-image {
		// position: absolute;

	}
	
	
	/* 轮播图样式 */
	.carousel-container {
	  width: 100%;
	  overflow: hidden;
	  background-color: #f5f5f5;
	}
	
	.carousel-swiper {
	  width: 100%;
	  height: 400rpx;
	}
	
	.carousel-image {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}
</style>
